<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>51包装</title>
    <!-- 导入bootstrap框架 -->
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <!-- 导入css文件 -->
    <link rel="stylesheet" href="./表单页面.css">
</head>

<body>
    <div id="top">
        <div class="topInfo">
            <span>咨询电话 : 010-59478634</span>
            <div class="logIN">
                <span>登陆</span>
                <span>注册</span>
            </div>
        </div>
        <div class="topNav">
            <ul>
                <li>首页</li>
                <li>在线定制</li>
                <li>标准箱</li>
                <li>品质保障</li>
            </ul>
        </div>
    </div>

    <div id="middle">
        <div class="middleNav">
            <div class="box">
                <div class="lineCircle">
                    <div class="line">1</div>
                    <div class="circle"></div>
                </div>

                <div class="menu">1.定制纸箱</div>
            </div>
            <div class="box">
                <div class="lineCircle">
                    <div class="line">2</div>
                    <div class="circle"></div>
                </div>
                <div class="menu">2.选择数量</div>
            </div>
            <div class="box">
                <div class="lineCircle">
                    <div class="line">3</div>
                    <div class="circle"></div>
                </div>
                <div class="menu">3.上传附件</div>
            </div>
            <div class="box">
                <div class="lineCircle">
                    <div class="line">4</div>
                    <div class="circle"></div>
                </div>
                <div class="menu">4.确认下单</div>
            </div>
        </div>
        <div class="main">
            <h3>请您按照以下步骤来定制您的纸箱</h3>
            <div class="table">
                <div class="boxType">
                    <img src="./imgs/logo-1.png" alt="">
                    <span>选择箱型</span>
                </div>
                <div class="mainTop">
                    <div class="infomationType">
                        <label class="type"><input type="radio" name="cheakRadios"><span> &#8195 对口箱</span></label>
                        <label class="type"><input type="radio" name="cheakRadios">&#8195 飞机盒</label>
                        <label class="type"><input type="radio" name="cheakRadios">&#8195 天地盖</label>
                    </div>

                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
                            查看详情
                            <span》 class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a href="#">查看详情</a>
                            </li>
                            <li role="presentation">
                                <a href="#">查看详情</a>
                            </li>
                            <li role="presentation">
                                <a href="#">查看详情</a>
                            </li>
                            <li role="presentation">
                                <a href="#">查看详情</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="boxType">
                    <img src="./imgs/logo-2.png" alt="">
                    <span>确定尺寸</span>
                </div>

                <div class="mainMiddle">
                    <div class="cnfirmSize">
                        <div class="typeTwo">
                            <label class="type"><input type="radio" name="cheakRadios"><span>外径</span></label>
                            <div>长 <input type="number" min="1">mm</div>
                            <div>宽 <input type="number" min="1">mm</div>
                            <div>高 <input type="number" min="1">mm</div>
                        </div>
                        <div class="typeTwo">
                            <label class="type"><input type="radio" name="cheakRadios"><span>内径</span></label>
                            <div>长 <input type="number" min="1">mm</div>
                            <div>宽 <input type="number" min="1">mm</div>
                            <div>高 <input type="number" min="1">mm</div>
                        </div>
                    </div>

                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
                            查看详情
                            <span》 class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a href="#">查看详情</a>
                            </li>
                            <li role="presentation">
                                <a href="#">查看详情</a>
                            </li>
                            <li role="presentation">
                                <a href="#">查看详情</a>
                            </li>
                            <li role="presentation">
                                <a href="#">查看详情</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="boxType">
                    <img src="./imgs/logo-3.png" alt="">
                    <span>选择材质</span>
                </div>
                <div class="mainBottom">
                    <div class="infomationTypeThree">
                        <label class="typeThree"><input type="radio" name="cheakRadios">&#8195 三层A瓦优质</label>
                        <label class="typeThree"><input type="radio" name="cheakRadios">&#8195 三层A瓦优质</label>
                        <label class="typeThree"><input type="radio" name="cheakRadios">&#8195 三层A瓦优质</label>
                        <label class="typeThree"><input type="radio" name="cheakRadios">&#8195 三层A瓦优质</label>
                        <label class="typeThree"><input type="radio" name="cheakRadios">&#8195 三层A瓦优质</label>
                    </div>

                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
                            查看详情
                            <span》 class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a href="#">查看详情</a>
                            </li>
                            <li role="presentation">
                                <a href="#">查看详情</a>
                            </li>
                            <li role="presentation">
                                <a href="#">查看详情</a>
                            </li>
                            <li role="presentation">
                                <a href="#">查看详情</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="nextBox">
                    <button class="nextStep">下一步</button>
                </div>

            </div>
        </div>



        <div id="bottom">
            <div class="bottomRow">
                <div class="job">51包装网——纸箱包装首选平台</div>
                <div class="about">
                    <div class="aboutTop">
                        <a href="#">关于我们</a>
                        <a href="#">配送流程</a>
                        <a href="#">联系我们</a>
                    </div>
                    <div class="aboutBottom">
                        <a href="#">下单指南</a>
                        <a href="#">媒体介绍</a>
                    </div>
                </div>
                <div class="tel">
                    <ul>
                        <li>TEL:400-0000-000</li>
                        <li>企业QQ：123456789</li>
                        <li>微信号:XXXXXXXX</li>
                    </ul>
                    <img src="./imgs/qrcode.jpg" alt="">
                </div>
            </div>
        </div>

        <footer>北京五一包装科技有限公司Copyright ©2015 &#8195 51baozhuang.com015 &#8195 All rights reserved. 京icp备99999999-1
        </footer>
</body>

</html>